<template>
	<view class="content">
		<view class="guide-pages" v-if="guidePages">
			<swiper class="swiper" indicator-dots="true" indicator-color="#FDAEAF" indicator-active-color="#FA3F40">
				<swiper-item class="swiper-item">
					<view class="title">
						超级福利，3步省钱
					</view>
					<view class="value">
						搜索宝贝标题 领券拿补贴
					</view>
					<image class="swiper-img" src="@/static/images/index/start1.png"></image>
				</swiper-item>
				<block v-for="(perm, index) in permInfo.common" :key="index">
					<swiper-item class="swiper-item" v-if="perm.name === 'isShelf' && perm.status === 1">
						<view class="title">
							高额返利
						</view>
						<view class="value">
							网购达人都在用超高返利app
						</view>
						<image class="swiper-img" src="@/static/images/index/start2.png"></image>
					</swiper-item>
				</block>
				<swiper-item class="swiper-item">
					<view class="title">
						全网海量宝贝超低价
					</view>
					<view class="value">
						真正让你实现少花钱，多省钱
					</view>
					<image class="swiper-img" src="@/static/images/index/start3.png"></image>
					<view class="start-btn" @tap="toIndex">立即体验</view>
				</swiper-item>
			</swiper>

			<!-- 隐私协议弹窗 -->
			<popup ref="policy" :maskClick="false" class="policy-popup">
				<view class="main">
					<view class="title">温馨提示</view>
					<view class="article-item">
						亲爱的用户，感谢您一直以来的支持！
					</view>
					<view class="article-item">
						为了更好地保护您的权益，同时遵守相关监管要求，我们更新了嗨返<text class="text" @tap="$Router.push('/pages/member/agreement')">《软件使用及用户协议》</text>和<text class="text" @tap="$Router.push('/pages/member/policy')">《隐私政策》</text>，特向您说明如下：
					</view>
					<view class="article-item">
						<view>1、为向您提供基本服务，我们会遵循正当合法，必要的原则收集和使用必要的信息；</view>
						<view>2、未经您的授权同意，您有权拒绝或取消授权；</view>
						<view>3、您可以查询、更正、删除您的个人信息，我们也提供账户注销的渠道。</view>

					</view>
					<view class="article-item">嗨返App将一如既往坚守使命，致力于为大家打造更舒适的购物体验！</view>
					<view class="footer">
						<view class="button cancel" @tap="cancel">不同意</view>
						<view class="button submit" @tap="submit">同意并使用</view>
					</view>
				</view>
			</popup>
		</view>
	</view>
</template>

<script>
	import Popup from '@/components/uni/Popup'
	import {
		mapGetters
	} from 'vuex';
	export default {
		name: 'start',
		components: {
			Popup
		},
		data() {
			return {
				guidePages: false
			};
		},
		onLoad() {
			this.loadExecution();
		},
		computed: {
			...mapGetters(['permInfo'])
		},
		methods: {
			toIndex() {
				uni.setStorage({
					key: 'launchFlag',
					data: true,
					success: function() {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
				});
			},
			loadExecution() {
				let vm = this;
				try {
					// 获取本地存储中launchFlag标识
					const value = uni.getStorageSync('launchFlag');
					if (value) {
						// launchFlag=true直接跳转到首页
						uni.switchTab({
							url: '/pages/index/index'
						});
					} else {
						// launchFlag!=true显示引导页
						this.guidePages = true;

						// 唤起用户协议、隐私政策弹窗（应用宝渠道）
						if (plus.runtime.channel === 'yyb') {
							setTimeout(() => {
								this.$refs.policy.open();
							}, 0);
						}
					}
				} catch (e) {
					// error 
					uni.setStorage({
						key: 'launchFlag',
						data: true,
						success: function() {
							vm.guidePages = true
						}
					});
				}
			},
			cancel() {
				plus.runtime.quit();  
			},
			submit() {
				this.$refs.policy.close();
			}
		}
	};
</script>
<style lang="scss" scoped>
	.content {
		background: #ffffff;
		height: 100vh;
		.swiper {
			height: 100vh;
			width: 100%;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.swiper-item {
				text-align: center;
				overflow: hidden;

				.title {
					color: #ff3e3f;
					font-size: 48rpx;
					margin-top: 142rpx;
				}

				.value {
					color: #aaaaaa;
					font-size: 40rpx;
					margin-top: 20rpx;
				}

				.swiper-img {
					width: 100%;
					height: 774rpx;
					margin-top: 36rpx;
				}

				.start-btn {
					position: fixed;
					left: 0;
					right: 0;
					bottom: 120rpx;
					margin: auto;
					width: 230rpx;
					height: 68rpx;
					border-radius: 34rpx;
					background: #f70114;
					text-align: center;
					line-height: 68rpx;
					color: #ffffff;
					font-size: 28rpx;
				}

				.desc {
					width: 100%;
					position: fixed;
					bottom: 70rpx;
					text-align: center;

					.text {
						color: $main-color;
					}
				}
			}
		}

		.policy-popup {
			.main {
				background: #fff;
				border-radius: 16rpx;
				width: 650rpx;
				padding: 0 34rpx 30rpx;

				.title {
					text-align: center;
					font-size: 32rpx;
					line-height: 100rpx;
					color: #383434;
				}

				.article-item {
					margin-bottom: 20rpx;
					font-size: 28rpx;
					color: #616161;
					.text {
						color: $main-color;
					}
				}

				.footer {
					margin-top: 40rpx;
					@include flexBox(space-around);

					.button {
						width: 250rpx;
						line-height: 90rpx;
						text-align: center;
						border-radius: 16rpx;
					}

					.cancel {
						background: #ded7cf;
					}

					.submit {
						background: linear-gradient(270deg, rgba(247, 1, 20, 1) 0%, rgba(247, 115, 1, 1) 100%);
						color: #fff;
					}
				}
			}
		}
	}
</style>
